@charset "utf-8";
@import "common/reset";
@function p($px){
    @return $px/2*1px;
}
$blue:#241f47;
$yellow: #fade5d;
@mixin transf{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
body{
    height: 100%;
    position: relative;
}
.main{
    position: relative;
}
#checkAll{
    width: 0;
    height: 0;
    position: absolute;
    &:checked ~ .fixed .settle .check label.checkAll i{
        display: block;
    }
    &:checked ~ ul li .checked label.checkAll label i{
        display: block;
    }
}
.shopM{
    height: 100%;
    background: url(../img/bg.jpg);
    .fixed{
        width: 100%;
        position: fixed;
        bottom: 0;
    }
    .settle{
        width: 100%;
        height: p(89);
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #fff;
        .check{
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            label{
                display: inline-block;
                width: p(46);
                height: p(46);
                border: 1px solid #f85e5e;
                border-radius: 50%;
                position: relative;
                i{
                    display: none;
                    position: absolute;
                    top: -1px;
                    left: 0;
                    font-size: p(46);
                    color: #f85e5e;
                }
            }
            span{
                margin-left: p(20);
                font-size: p(28);
                color: #5c5c5c;
            }
        }
        .totalPrice{
            flex-grow: 8;
            text-align: center;
            p:nth-of-type(1){
                span:first-child{
                    font-size: p(22);
                    color: #6b6b6b;
                }
                span:last-child{
                    font-size: p(30);
                    color: #e73838;
                }
            }
            p:nth-of-type(2){
                font-size: p(20);
                color: #6b6b6b;
            }
        }
        .goBtn{
            flex-grow: 1;
            a{
                display: inline-block;
                font-size: p(26);
                color: #fff;
                width: p(161);
                height: p(71);
                line-height: p(71);
                text-align: center;
                border-radius: p(7);
                background: #f85c5c;
            }
        }
    }
    ul{
        .delete-btn{
            width: 0;
            height: 0;
            position: absolute;
            &:checked + li{
                display: none;
            }
        }
        li{
            width: 100%;
            height: p(182);
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #fff;
            border-bottom: 1px solid #cdcbce;
            .checked{
                flex-grow: 1;
                text-align: center;
                position: relative;
                input.check-btn{
                    width: 0;
                    height: 0;
                    position: absolute;
                    &:checked + label i{
                        display: block;
                    }
                }
                label{
                    display: inline-block;
                    width: p(46);
                    height: p(46);
                    border: 1px solid #f85e5e;
                    border-radius: 50%;
                    position: relative;
                    i{
                        display: none;
                        position: absolute;
                        top: -1px;
                        left: 0;
                        font-size: p(46);
                        color: #f85e5e;
                    }
                }
                label.checkAll{
                    border: 0;
                }
            }
            .img{
                flex-grow: 1;
                width: p(120);
                height: p(125);
                text-align: center;
                label{
                    display: inline-block;
                    width: p(120);
                    height: p(125);
                }
                a{
                    display: inline-block;
                    width: p(120);
                    height: p(125);
                    overflow: hidden;
                    position: relative;
                    img{
                        width: 100%;
                        @inclu transf;
                    } 
                }  
            }
            .desc{
                flex-grow: 1;
                h3{
                    font-size: p(24);
                    a{
                        color: #5c5c5c;
                    }
                }
                .price{
                    font-size: p(24);
                    color: #eb7575;
                    margin-left: p(12);
                }
                .num{
                    width: p(127);
                    height: p(38);
                    border: 1px solid #6b6b6b;
                    margin-left: p(12);
                    padding-left: p(10);
                }
            }
            .delete{
                text-align: center;
                flex-grow: 1;
                font-size: p(20);
                color: #eb7575;
                i{
                    font-size: p(46);
                }
            }
        }
    }
}
